<script setup lang="ts">
import { onMounted } from 'vue';
import { getCurrentInstance, showLoading } from '@tarojs/taro';
import { formatTimestampStr } from '/@/utils/time';
import { MESSAGE_RECORD_DETAIL, MESSAGE_RECORD_READ } from '/@/api/modules/base/message-record';
import { appEvents } from '/@/utils/events';
import { state } from './state';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  id: string;
};

onMounted(() => {
  showLoading();
  MESSAGE_RECORD_DETAIL({ id: params.id }).then((res) => {
    state.content = res.content;
    state.title = res.title;
    state.publishTime = res.publishTime;
  });

  MESSAGE_RECORD_READ({ isRead: 1, messageId: params.id }).then(() => {
    appEvents.trigger('msgItemRead', { id: params.id });
  });
});
</script>

<template>
  <view class="msg-detail app-page--1">
    <app-navbar title="消息详情" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="msg-detail__wrapper">
        <view class="msg-detail__title">{{ state.title }}</view>
        <view v-if="state.publishTime" class="msg-detail__time">
          {{ formatTimestampStr(state.publishTime) }}
        </view>
        <view v-if="state.content" v-html="state.content" class="msg-detail__content"></view>
        <view v-else class="app-page__content-tips">暂无内容！</view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
